<template>
	<view class="publicHead">
		<!-- #ifndef MP-WEIXIN -->
		<view class="navigationBar" :class="{'navigationShadow': !noshadow}" :style="{'padding-top': `${safeArea.top || 0}px`}">
			<navigator class="navigationBar-fanhui" open-type="navigateBack" hover-class="none" v-if="!onlyHead">
				<image class="icon-return" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng/icon/index/return.png" mode=""></image>
			</navigator>
			<text class="navigationBar-title" :class="{'full': onlyHead}">{{title}}</text>
		</view>
		<view class="navigationHover"></view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="navigationShadow" v-if="!noshadow && shadow"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			shadow: {
				type: Boolean,
				default: false
			},
			noshadow: {
				type: Boolean,
				default: false
			},
			onlyHead: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				safeArea: {}
			}
		},
		created() {
			this.safeArea = this.$store.state.safeArea
			// console.log(this.title, 'publicHeadcreated', this.safeArea.top)
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.navigationBar {
	position: fixed;
	display: flex;
	align-items: center;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	padding-left: 32rpx;
	padding-right: 32rpx;
	.navigationBar-fanhui{
		width: 10%;
		.icon-return{
			display: block;
			width: 20rpx;
			height: 34rpx;
		}
	}
	.navigationBar-title{
		flex: none;
		width: 80%;
		height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #242424;
		line-height: 88rpx;
		&.full {
			width: 100%;
		}
	}
}
.navigationHover {
	height: 88rpx;
}
.navigationShadow {
	width: 100%;
	min-height: 5rpx;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(79, 86, 98, 0.1);
}
</style>
